package com.grechur.wanandroidcompose.page

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Keyboard
import androidx.compose.material.icons.filled.Person
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Visibility
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import com.grechur.wanandroidcompose.viewmodel.LoginViewModel
import kotlinx.coroutines.launch

@Composable
fun RegisterPage(globalNavController: NavHostController,loginViewModel: LoginViewModel = viewModel()) {
    val coroutineScope = rememberCoroutineScope()
    var name by remember {
        mutableStateOf("")
    }
    var password by remember {
        mutableStateOf("")
    }
    var repassword by remember {
        mutableStateOf("")
    }
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val all = createRef()
        ConstraintLayout(modifier = Modifier.constrainAs(all) {
            top.linkTo(parent.top)
            end.linkTo(parent.end)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
        }) {
            val (userName, pwd, rePwd, regist, error) = createRefs()
            TextField(value = name,
                onValueChange = { name = it },
                modifier = Modifier.constrainAs(userName) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                },
                shape = RoundedCornerShape(8.dp),
                singleLine = true,
                label = { Text(text = "请输入用户名") },
                placeholder = { Text(text = "用户名") },
                leadingIcon = {
                    Icon(imageVector = Icons.Default.Person, contentDescription = "用户名")
                })

            TextField(value = password, onValueChange = {password = it},
                modifier = Modifier.constrainAs(pwd){
                    start.linkTo(parent.start)
                    top.linkTo(userName.bottom, margin = 10.dp)
                },
                shape = RoundedCornerShape(8.dp),
                singleLine = true,
                label = { Text(text = "请输入密码")},
                placeholder = { Text(text = "密码")},
                leadingIcon = {
                    Icon(imageVector = Icons.Default.Keyboard, contentDescription = "密码")
                }
            )

            TextField(value = repassword, onValueChange = {repassword = it},
                modifier = Modifier.constrainAs(rePwd){
                    start.linkTo(parent.start)
                    top.linkTo(pwd.bottom, margin = 10.dp)
                },
                shape = RoundedCornerShape(8.dp),
                singleLine = true,
                label = { Text(text = "请再次输入密码")},
                placeholder = { Text(text = "确认密码")},
                leadingIcon = {
                    Icon(imageVector = Icons.Default.Keyboard, contentDescription = "确认密码")
                }
            )

            Button(onClick = {
                coroutineScope.launch {
                    loginViewModel.register(name,password,repassword)
                }
            }, modifier = Modifier.constrainAs(regist){
                start.linkTo(parent.start)
                top.linkTo(rePwd.bottom, margin = 10.dp)
                end.linkTo(parent.end)
            }) {
                Text(text = "注册账号")
            }
            AnimatedVisibility(visible = !loginViewModel.isRegist, modifier = Modifier.constrainAs(error){
                start.linkTo(parent.start)
                top.linkTo(regist.bottom, margin = 10.dp)
            }) {
                Text(text = "${loginViewModel.registError}", color = Color.Red)
            }
        }
    }

}
